import React, { PureComponent, Fragment } from 'react';
import {Tabs} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import Debounce from 'lodash-decorators/debounce';
import pathToRegexp from 'path-to-regexp';
import { getMenuList } from '@/utils/utils';
import { clearTokenCookie, getMainHost } from '@/utils/utils';
import styles from './Header.less';
const { TabPane } = Tabs;
@connect(({ global }) => ({ oemInfo: global.oemInfo }))
export default class GlobalHeader extends PureComponent {
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }
  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }
  
  getCurrentRouterInfo(level) {
    let menuList = this.props.menus;
    let currentRouterInfo = {
      index: -1,
      name: this.props.menus.length > 0 ? this.props.menus[0].name : '',
      tabs:[],
      currentId:0
    };
    let urlRouter = this.props.location.pathname.substr(13);
    if (level == 'one') {
      for (var i = 0; i < menuList.length; i++) {       
        let item = menuList[i];
        let childMenus = item.menus;
        if(menuList[i].path === `${urlRouter}`){
            currentRouterInfo.index = i;
            currentRouterInfo.id = menuList[i].id;
            currentRouterInfo.name = menuList[i].name;
            currentRouterInfo.currentId=menuList[i].id;
            break;
        }else{
          if(childMenus){
            for( let j=0;j<childMenus.length;j++){
              for(let k=0;k<childMenus[j].menus.length;k++){
                if(childMenus[j].menus[k].path === `${urlRouter}`){
                  currentRouterInfo.index = i;
                  currentRouterInfo.id = menuList[i].id;
                  currentRouterInfo.name = menuList[i].name;
                  currentRouterInfo.currentId=menuList[i].id;
                  break;
                }else{
                  if(childMenus[j].menus[k].menus){
                    for(let z=0;z<childMenus[j].menus[k].menus.length;z++ ){
                       let arr=pathToRegexp(childMenus[j].menus[k].menus[z].path).exec(`${urlRouter}`);
                      if(
                        childMenus[j].menus[k].menus[z].path === `${urlRouter}`
                        ||arr&&`${urlRouter}`===arr[0]
                        ){
                        currentRouterInfo.index = i;
                        currentRouterInfo.id = menuList[i].id;
                        currentRouterInfo.name = menuList[i].name;
                        currentRouterInfo.currentId=menuList[i].id;
                        break;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    } else if (level == 'two') {
      for (var i = 0; i < menuList.length; i++) {
        let isBreak = false;
        let childrenMenus = menuList[i].menus;
        if (childrenMenus.length > 0) {
          for (var k = 0; k < childrenMenus.length; k++) {
            let childrenMenusN = childrenMenus[k].menus;
            if (childrenMenusN.length > 0) {              
              for (var j = 0; j < childrenMenusN.length; j++) {               
                if(childrenMenusN[j].path === urlRouter){
                  console.log(urlRouter,990)
                    let tabs= childrenMenusN[j].menus?childrenMenusN[j].menus.filter(v=>v.isTab):[];
                    let tabs2= tabs.filter(v=>pathToRegexp(v.path).exec(`${childrenMenusN[j].path}`));
                    currentRouterInfo.index = j;
                    currentRouterInfo.id = childrenMenusN[j].id;
                    currentRouterInfo.name = childrenMenusN[j].name;
                    currentRouterInfo.tabs = tabs;
                    currentRouterInfo.currentId=childrenMenusN[j].id;
                    if(childrenMenusN[j].menus){
                            for(let o=0;o<childrenMenusN[j].menus.length;o++){
                              if(pathToRegexp(childrenMenusN[j].menus[o].path).exec(`${urlRouter}`)){
                                currentRouterInfo.currentId=childrenMenusN[j].menus[o].id;
                              }
                            }
                          }
                    isBreak = true;                    
                    break;
                }else{
                  if(childrenMenusN[j].menus){
                    for(let k=0;k<childrenMenusN[j].menus.length;k++){
                       let arr=pathToRegexp(childrenMenusN[j].menus[k].path).exec(`${urlRouter}`);
                      if(
                        childrenMenusN[j].menus[k].path === `${urlRouter}`
                        ||arr&&`${urlRouter}`===arr[0]
                        ){      
                            console.log(urlRouter,900)                    
                          let tabs= childrenMenusN[j].menus?childrenMenusN[j].menus.filter(v=>v.isTab):[];
                          let tabs2= tabs.filter(v=>pathToRegexp(v.path).exec(`${childrenMenusN[j].path}`));
                          currentRouterInfo.index = j;
                          currentRouterInfo.id = childrenMenusN[j].id;
                        // currentRouterInfo.name = childrenMenusN[j].name;
                          currentRouterInfo.name = childrenMenusN[j].menus[k].name;
                          currentRouterInfo.currentId=childrenMenusN[j].id;
                          if(childrenMenusN[j].menus){
                            for(let o=0;o<childrenMenusN[j].menus.length;o++){
                              if(pathToRegexp(childrenMenusN[j].menus[o].path).exec(`${urlRouter}`)){
                                currentRouterInfo.currentId=childrenMenusN[j].menus[o].id;
                              }
                            }
                          }
                          currentRouterInfo.tabs = tabs.findIndex(v=>v.path===urlRouter)>-1?tabs:[];
                          isBreak = true;  
                          console.log(childrenMenusN[j],tabs2,urlRouter,777)                       
                          break;
                      }
                    }
                  }
                }
              }
            }
            if (isBreak) break;
          }
        }
      }
    }
    //console.log(currentRouterInfo, '方法内部currentRouterInfo');
    return currentRouterInfo;
  }
  onMenuClick = ({ key }) => {
    switch (key) {
      case 'changePass':
        //router.push('/modifyPss');
        break;
      case 'dataSetting':
        //router.push('/companySetting');
        break;
      case 'securitySetting':
        //router.push('/safeSetting');
        break;
      case 'logout':
        //document.cookie="token=0;domain=xiaokeduo.net;expires="+ new Date(0).toUTCString();
        clearTokenCookie(getMainHost());
        setTimeout(() => {
          window.location.href = this.props.oemInfo.passPortUrl;
        }, 200);
        break;
      default:
        break;
    }
  };
  toggle = () => {
    const { toggle } = this.props;
    toggle();
    //document.querySelector(`#layoutRight`).classList.add(`${styles.layoutRight_show}`);
  };

  onTabChange = (id,tabs) => { 
    let index=tabs.findIndex(v=>v.id==id);
    let path=index>-1? tabs[index].path:'';    
    router.replace({
      pathname: `/${window.storeId}${path}`,
    });   
  };

  render() {
    const { onMenuClick, oemInfo, topChildren } = this.props;
    let twoRouterInfo = this.getCurrentRouterInfo('two');
   console.log(twoRouterInfo)     
    return (
      <div
        className={styles.header}
        style={{ padding: 0, height: '64px', lineHeight: '64px' }}
        id="header"
      >        
        <Fragment>
          <div className={styles.breadcrumbs}>            
            {
              twoRouterInfo.tabs.length?(
                <span style={{position:'absolute',top:0,left:0,width:'100%'}}>
                  <Tabs activeKey={twoRouterInfo.currentId} onChange={(id)=>this.onTabChange(id,twoRouterInfo.tabs)}>
                    {
                      twoRouterInfo.tabs.map(v=>(
                         <TabPane tab={v.name} key={`${v.id}`}></TabPane>                        
                      ))
                      // <TabPane tab={v.name} key={`/${window.storeId}${v.path}`}></TabPane>
                    }                                        
                  </Tabs>
                </span>
              ):<span>{twoRouterInfo.name}</span>
            }            
          </div>
          <div className={styles.right} onClick={this.toggle}>
            帮助和服务
          </div>
        </Fragment>
      </div>
    );
  }
}
